<template>
	<view class="">
		<!-- 轮播图 -->
		<view class="posfix zin2 box rad4 row">
			<view class="a rad4 col3 size26 font500" :style="tabtype == 0 ? 'background-color: #fff;' : 'color: #fff;'"
				@click="tabType(0)">
				视频
			</view>
			<view class="a rad4 col3 size26 font500" :style="tabtype == 1 ? 'background-color: #fff;' : 'color: #fff;'"
				@click="tabType(1)">
				图片
			</view>
		</view>
		<view v-if="tabtype == 0">
			<video style="width: 100%;height: 200px;" id="myVideo" :src="farmproduceInfo.videos"></video>
		</view>
		<view v-if="tabtype == 1">
			<u-swiper :list="farmproduceInfo.multi_graph" :imgMode="widthFix" height="200"
				@change="e => current = e.current" :autoplay="false" :radius="0">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in farmproduceInfo.multi_graph" :key="index"
						:class="[index === current && 'indicator_active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<!-- 轮播图 -->
		<!-- 信息 -->
		<view class="pad30 posrel zin2 size30 font700 col0"
			style="background-color: #fff;border-radius: 30rpx 30rpx 0 0;top: -30rpx;padding-bottom: 0;">
			{{ farmproduceInfo.title }}
			<view class="row mintop10 align font700">
				<view class="size24" style="color: #FF2D10;" v-if="user_id">
					￥
				</view>
				<view class="size28 font700" style="color: #FF2D10;" v-if="user_id">
					{{ farmproduceInfo.price }}
				</view>
				<!-- <view class="size24 col3 minleft10 font500" v-if="user_id">
					元
				</view> -->
				<view class="row minau minright0 align">
					<u-icon name="eye" color="#888888" size="22"></u-icon>
					<view class="size22 col8 font500 row align" style="margin-left: 8rpx;">
						<view class="col3 size26">
							{{ farmproduceInfo.views }}
						</view>
						人浏览过
					</view>
				</view>
			</view>
		</view>
		<!-- 信息 -->
		<!-- 基本信息,优势等 -->
		<view class="min30_rl">
			<view class="font700 size30" style="color: #885400;">
				基本信息
			</view>
			<view class="row align mintop30">
				<image src="@/static/index/number.png" mode="" style="width: 32rpx;height: 32rpx;">
				</image>
				<view class="font500 size26 minleft10" style="color: #808080;">
					商品编号
				</view>
				<view class="font500 size26 col3 minleft20">
					{{ farmproduceInfo.numbering }}
				</view>
			</view>
			<view class="row align mintop20">
				<image src="@/static/index/add.png" mode="" style="width: 28rpx;height: 34rpx;">
				</image>
				<view class="font500 size26 minleft10" style="color: #808080;">
					发货地
				</view>
				<view class="font500 size26 col3 minleft20">
					{{ farmproduceInfo.origin_of_shipment }}
				</view>
			</view>
			<view class="row align mintop20">
				<image src="@/static/index/85.png" mode="" style="width: 32rpx;height: 32rpx;">
				</image>
				<view class="font500 size26 minleft10" style="color: #808080;">
					上市时间
				</view>
				<view class="font500 size26 col3 minleft20">
					{{ farmproduceInfo.availability }}
				</view>
			</view>


			<!-- <view class="padtop30 mintop30" style="border-top: 2rpx solid #e7e7e7;">
				<view class="font700 size30 minbottom20" style="color: #885400;">
					电力条件
				</view>
				<view class="col3 size28 font500" style="text-indent: 2rem;">
					该地区电力供应相对稳定，电网中断较少。电力容量为XX兆瓦，主要由传统发电厂提供。
				</view>
			</view> -->
		</view>
		<!-- 基本信息,优势等 -->
		<!-- 底部盒子 -->
		<view style="height: 200rpx;">

		</view>
		<!-- 底部盒子 -->
		<!-- 底部 -->
		<view class="posfix zin2 row"
			style="padding:30rpx 40rpx;background-color: #fff;bottom: 0;width: 90%;box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(197,197,197,0.25);">
			<button class="WeChat_image" open-type="share" @getphonenumber="getPhoneNumber">
				<image src="@/static/index/3.png" mode="" style="width: 38rpx;height: 40rpx;"></image>
				<view class="size24 font500 col3">
					分享
				</view>
			</button>
			<button class="WeChat_image" @click="getCollection">
				<image src="@/static/index/33.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
				<view class="size24 font500 col3">
					收藏
				</view>
			</button>
			<view class="minau minright0 column size30 col3 font500">
				{{ farmproducePhone }}
				<view class="row align minauto mintop10" @click="callPhone">
					<image src="@/static/index/5.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
					<view class="size28 font700 minleft10" style="color: #F69200;">
						一键联系
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				user_id: '',
				current: 0,
				tabtype: 0,
				farmproduceInfo: [],
				farmproducePhone: '',
			}
		},
		onLoad(op) {
			this.id = op.id
			this.user_id = uni.getStorageSync('user_id');
			this.getFarmproduceInfo()
		},
		onShow() {
			this.user_id = uni.getStorageSync('user_id');
		},
		methods: {
			async getFarmproduceInfo() {
				let {
					code,
					msg,
					data
				} = await this.$com.fetchGet("AppletHome/Agricultural_productsInfo", {
					id: this.id,
					user_id: this.user_id,
				})
				if (code == 1) {
					this.farmproduceInfo = data
					let hiddenPhoneNumber = data.admin_phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
					this.farmproducePhone = hiddenPhoneNumber
				} else {
					console.log(msg);
				}
			},
			getShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			async getCollection() {
				if (this.user_id) {
					//如果存在token
					let {
						code,
						msg,
						data
					} = await this.$com.fetch("AppletAsking/favorites", {
						goods_id: this.farmproduceInfo.id,
						user_id: this.user_id,
						title: this.farmproduceInfo.title,
						cover: this.farmproduceInfo.full_images,
						classify_name: this.farmproduceInfo.selectsTable.title,
						type: '出售',
						price: this.farmproduceInfo.price,
						age: '',
						acres: '',
						address: this.farmproduceInfo.origin_of_shipment,
						is_type: 3
					})
					if (code == 1) {
						this.$com.toast(msg)
					} else {
						this.$com.toast(msg)
					}
					//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
					//那么我们一起来获取用户信息
				} else {
					this.$com.toast('您还未登录，正在前往登录')
					setTimeout(() => {
						this.$jump.nav('/mypackage/sign')
					}, 1000)
				}
			},
			async getCall() {
				console.log(this.farmproduceInfo.title);
				let {
					code,
					msg,
					data
				} = await this.$com.fetch("AppletAsking/contacted", {
					goods_id: this.farmproduceInfo.id,
					user_id: this.user_id,
					title: this.farmproduceInfo.title,
					cover: this.farmproduceInfo.full_images,
					classify_name: this.farmproduceInfo.selectsTable.title,
					type: '出售',
					price: this.farmproduceInfo.price,
					age: '',
					acres: '',
					address: this.farmproduceInfo.origin_of_shipment,
					is_type: 3
				})
				if (code == 1) {
					// this.$com.toast(msg)
				} else {
					// this.$com.toast(msg)
				}
			},
			callPhone() {
				var _this = this
				if (_this.user_id) {
					//如果存在token
					uni.makePhoneCall({
						phoneNumber:  this.farmproduceInfo.admin_phone,
						success(res) {
							console.log(res);
							_this.getCall()
						},
						fail(err) {
							console.log(err);
						}
					})
				} else {
					_this.$com.toast('您还未登录，正在前往登录')
					setTimeout(function() {
						_this.$jump.nav('/mypackage/sign')
					}, 1000)
				}
			},
			tabType(type) {
				this.tabtype = type
			}
		}
	}
</script>

<style scoped lang="less">
	.box {
		background: rgba(0, 0, 0, 0.5);
		top: 5px;
		left: 10px;

		.a {
			padding: 6rpx 18rpx;
		}
	}
</style>
<style lang="scss">
	.WeChat_image {
		text-align: center;
		background-color: #ffffff;
		margin: 0;
		line-height: 1.25rem;

		&::after {
			border: none;
		}
	}

	//这是轮播图点样式
	.indicator {
		@include flex(row);
		justify-content: center;
		margin-bottom: 30rpx;

		&__dot {
			height: 3px;
			width: 10px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.5);
			border: 2rpx solid #ffffff;
			margin: 0 5px;
			transition: background-color 0.3s;
		}

		&_active {
			height: 3px;
			width: 10px;
			border-radius: 100px;
			background-color: #ffffff;
			margin: 0 5px;
			transition: background-color 0.3s;
		}
	}
</style>>